import { View, Image } from '@tarojs/components'
import Taro, { useDidShow, useLoad } from '@tarojs/taro';
import axios from '@/request/index'
import { useState } from 'react';
import { useRichStore } from '@/store/rich';
import { useWebStore } from '@/store/web';
import './index.scss'

export default function News() {

  const [list, setList]= useState<any[]>([])
  const { setRichContent } = useRichStore()
  const { setUrl } = useWebStore()

  useLoad(() => {
    console.log('Page loaded.')
  })

  const initList = async () => {
    const res = await axios.get('/catalog/homePage', {
      params: {
        type: 0,
      }
    })
    if (res && res.data) {
      setList(res.data)
    }
  }

  useDidShow(() => {
    initList()
  });

  const onClickItem = (item: any) => {
    // setUrl(item.content);
    // Taro.navigateTo({
    //   url: '/package-home/pages/WebView/index'
    // })
    setRichContent(item.content);
    Taro.navigateTo({
      url: '/package-home/pages/RichTextView/index'
    })
  }


  return (
    <View className='video bg-[#F5F5F5] min-h-screen pb-safe-offset-8'>
      {
        list.map((item: any) => {
          return (
            <View key={item.id} className='bg-white p-3'
            onClick={() => onClickItem(item)}>
              {/* <Image src={require('./images/test.png')} className='w-full h-[302px]' /> */}
              <Image src={item.cover || require('./images/test.png')} className='w-full h-[302px]' />
              <View className='text-[34px] text-[#000] leading-[34px] mt-1'>
                {/* 春季头脑多发热是什么原因？ */}
                {item.title}
              </View>
              {/* <View className='text-[28px] text-[rgba(0,0,0,0.7)] leading-[38px] mt-2'>
                {item.content}
              </View> */}
              <View className='text-[24px] text-[rgba(0,0,0,0.5)] leading-[24px] mt-2'>
                {/* 文字来源 时间 | 其他信息 */}
                作者：{item.author} | {item.issueTime} 
              </View>
            </View>
          )
        })
      }
      {/* <View className='mt-4 bg-white p-3'>
        <Image src={require('./images/test.png')} className='w-full h-[302px]' />
        <View className='text-[34px] text-[#000] leading-[34px] mt-2'>
          乙肝患者日常需要注意什么？
        </View>
        <View className='text-[28px] text-[rgba(0,0,0,0.7)] leading-[38px] mt-2 pb-5 border-b border-[#e5e5e5]'>
          由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
        </View>
        <View className='text-[34px] text-[#000] leading-[34px] mt-5'>
          身上发痒，长红疹要重视！
        </View>
        <View className='text-[28px] text-[rgba(0,0,0,0.7)] leading-[38px] mt-2 pb-5 border-b border-[#e5e5e5]'>
          尘埃扩散着，为一片土壤的凝固，母体子宫里的星云密布，在膨胀中复活，更多的魔力化作脐带。
        </View>
        <View className='mt-5 flex flex-row items-center justify-between'>
          <View className='text-[#576B95] text-[34px]'>查看更多</View>
          <Image src={require('./images/arrow.png')} className='w-[24px] h-[48px]' />
        </View>
      </View> */}

    </View>
  )
}
